<template>
	<view class="home-msg">
		<view class="title">
			<view>选择模板</view>
			<view class="close" @click="close">+</view>
		</view>
		<view class="bannerbox">
			<view class="box-item">
				<view>老师名称：</view>
				<input type="text" placeholder="接收祝福的人" v-model="input.y" />
			</view>
			<view class="box-item">
				<view>你的名称：</view>
				<input type="text" placeholder="发送祝福的人" v-model="input.i" />
			</view>
			<button type="default" style="margin-top: 60rpx;" @click="inputdata">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "home-msg",
		props: ['text'],
		data() {
			return {
				input: {}
			};
		},
		created() {
			this.input = {
				i: this.text.signer,
				y: this.text.teacher
			}
		},
		methods: {
			close() {
				this.$emit('close', false);
			},
			inputdata() {
				const {
					input
				} = this
				if (!input.i || !input.y) return uni.showToast({
					title: '信息未填完整',
					icon: 'none'
				})
				this.$emit('input', input)
				this.close()
			}
		}
	}
</script>

<style>
	.title {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #eeeeee;
		text-align: center;
		font-weight: bold;
	}

	.home-msg {
		position: absolute;
		bottom: 0;
		z-index: 111;
		height: 620rpx;
		width: 750rpx;
		background-color: #fefefe;
		border-radius: 30rpx 30rpx 0 0;
	}

	.bannerbox {
		margin: 30rpx;
		padding-right: 30rpx;
	}

	.box-item {
		display: flex;
		align-items: center;
		margin: 15rpx 0;
	}

	.box-item input {
		border-bottom: 1px solid #999999;
		width: 60%;
		padding: 10rpx;
	}

	.close {
		position: absolute;
		left: 700rpx;
		top: -6rpx;
		z-index: 1111;
		font-size: 50rpx;
		transform: rotate(45deg);
	}
</style>
